<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <title>Canvas </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body class="body--ready" data-twttr-rendered="true">
    <canvas class="canvas" width="1680" height="554"></canvas>

    <div class="help">?</div> 

    <div class="ui">
      <input class="ui-input" type="text">
      <span class="ui-return">↵</span>
    </div>

    <div class="overlay">
      <span class="twitter-share">
       <!--  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="./Shape Shifter_files/tweet_button.1367516458.htm" class="twitter-share-button twitter-count-none" style="width: 59px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe> -->
       
      </span>

      <div class="tabs">
        <div class="tabs-labels"><span class="tabs-label tabs-label--active">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

        <div class="tabs-panels">
          <ul class="tabs-panel commands tabs-panel--active">
            <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
            <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
            <li class="commands-item"><span class="commands-item-title">Icon</span><span class="commands-item-info" data-demo="#icon thumbs-up">#icon<span class="commands-item-mode">name</span>&nbsp;(using <a href="http://fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a>)</span><span class="commands-item-action">Demo</span></li>
            <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
            <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
            <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

            <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
          </ul>

          <div class="tabs-panel ui-details">
            <div class="ui-details-content">
              <h1>Shape Shifter</h1>
              <p>
                An experiment by <a href="http://www.kennethcachia.com/" target="_blank">Kenneth Cachia</a><a>.<br>
                </a><a href="http://fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.
              </p>
            </div>
          </div>

          <div class="tabs-panel ui-share">
            <div class="ui-share-content">
              <h1>Sharing</h1>
              <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
              <p>
                <a href="http://www.kennethcachia.com/shape-shifter/?a=Hello">www.kennethcachia.com/shape-shifter?a=Hello</a><br>
                <a href="http://www.kennethcachia.com/shape-shifter/?a=Hello|#countdown 3">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/shape-shifter.js"></script>
    <script src="js/ga.js"></script>

  

</body></html>